	*{
		margin: 0;
		padding: 0;
	}
	.bx{
		margin:0px auto;
		width: 1200px;
	}
	/*头，第一段*/
	.top{
		height:100px;
	}
	.top .left{
		float: left;
		padding-top:25px;
	}
	.top .left img{
		float: left;
		margin-right:20px;
	}
	.top>.left>ul,.top>.left>ul>li{
		float:left;
		list-style: none;
	}
	.top .left ul li{
		margin-left:30px;
		margin-top:10px;
		padding-bottom:5px;
	}
	.top .left ul li:hover{
		border-bottom: 2px solid #00a4ff;
	}
	.top .right{
		height: 100px;
		line-height: 100px;
		float: right;
	}
	.top .right .right1{
		float: right;
		margin-right:30px;
	}
	.top .right .right1 img{
		float:left;
		margin-top:35px;
		margin-left:30px;
	}
	.top .right .right2{
		float: left;
	}
	.top .right input{
		float: left;
		width:300px;
		height:32px;
		padding-left:15px;
		color: #cececf;
		font-size:14px;
		border: 1px solid #00a4ff;
		margin-top:30px;
	}
	.top .right .right2{
		float: left;
		width: 40px;
		height: 34px;
		margin-top: 30px;
		background-color:#00a4ff;
	}
	.top .right .right2 img{
		float: right;
		margin: 10px 10px 0px 0px;
	}
	/*颈，第二段*/
	.jing{
		height: 420px;
		background-color:#033db2;
	}
	.jing .zhong{
		position: relative;
	}
	.jing .left{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 190px;
		height: 420px;
		background-color:rgb(0,0,0,0.3);
	}
	.jing .left ul{
		padding: 0px 20px;
		list-style: none;
	}
	.jing .left ul li{
		color: #e9e9ec;
		margin:22px 0px;
	}
	.jing .left ul li div{
		float: right;
	}
	.jing .left ul li:hover{
		color: #00b4ff;
	}
	.jing .right{
		position: absolute;
		top: 50px;
		right: 0px;
		width: 228px;
		height: 300px;
		background-color:white;
	}
	.jing .right h3{
		height: 50px;
		text-align: center;
		line-height: 50px;
		color: white;
		background-color:#9bceea;
	}
	.jing .right .right1{
		padding:10px 0px 10px 20px;
		height:40px;
		font-size: 15px;
		border-bottom:1px solid #bdbdbd;
		background-color:white;
	}
	.jing .right .right1 p{
		font-size:14px;
		color:#bdbdbd;
	}
	.jing .right .right2 h3{
		float: left;
		width: 200px;
		height: 50px;
		margin:7px 12px;
		color: #00a4ff;
		border: 1px solid #00a4ff;
	}
	/*灰色大背景max,用于显示第三段到第八段灰色大背景*/
	#max{
		height:2340px;
		background-color: #f3f5f7;
	}
	/*肩部，第三小段*/
	.jian{
		height: 50px;
		margin-bottom:30px;
		box-shadow:0px 5px 5px #e2e3e5;
		line-height:50px;
	}
	.jian .left{
		font-size: 16px;
	}
	.jian .left h3{
		float: left;
		color: #00a4ff;
		margin-left:30px;
	}
	.jian .left span{
		color: #bfbfbf;
		margin: 0px 30px;
	}
	.jian .left p{
		float: right;
		font-size: 14px;
		color: #00a4ff;
		margin-right:30px;
	}
	/*精品推荐，第四段*/
	.jptj{
		height:615px;
		background-color: #f3f5f7;
	}
	.jptj .top{
		height:30px;
	}
	.jptj .top h3{
		float: left;
		color:#bfbfbf;
	}
	.jptj .top p{
		float: right;
		font-size: 12px;
		color:#868686;
		margin:10px 30px 0px 0px;
	}
	.jptj .main{
		width: 1215px;
		height: 600px;
		padding-left:10px;
		margin: 0px auto;
	}
	.jptj .main div{
		/*父盒子相对定位*/
		position: relative;
		float: left;
		width: 228px;
		height: 270px;
		background-color:#fff;
		margin:15px 14.5px 0px 0px;
	}
	.jptj .main div img{
		width:100%;
	}
	.jptj .main div .ding{
		/*给父盒子设置相对定位，然后子盒子
		 设置绝对定位,使小盒子贴在父盒子右上角*/
		position: absolute;
		top: 5px;
		right: -3px;
		width: 40px;
		height: 24px;
	}
	.jptj .main div h5{
		margin:15px 20px;
	}
	.jptj .main div p{
		margin-left:20px;
		font-size: 12px;
		color: #868686;
	}
	.jptj .main div p span{
		color:#ff7c2d;
	}
	/*编程入门和数据分析师,第五段和第六段(两段差不多)*/
	.bcrm{
		height:470px;
	}
	.bcrm .top{
		height:60px;
		line-height:60px;
	}
	.bcrm .top h3{
		float: left;
		color:#bfbfbf;
	}
	.bcrm .top .center{
		float: left;
		margin-left:320px;
	}
	.bcrm .top .center ul li{
		float: left;
		color: #868686;
		margin: 0px 20px;
		list-style: none;
	}
	.bcrm .top .center ul li:hover{
		color:#00a4ff;
	}	
	.bcrm .top p{
		float: right;
		font-size: 12px;
		color:#868686;
		margin:0px 30px 0px 0px;
	}
	.bcrm .main{
		height: 400px;
	}
	.bcrm .main .left{
		float: left;
	}
	.bcrm .main .right>img{
		margin:0px 0px 20px 15px;
	}
	.bcrm .main .right div{
		float: left;
		width: 227px;
		height:270px;
		background-color: #fff;
		margin-left:15px;
	}
	.bcrm .main .right h5{
		height: 50px;
		margin:15px 0px 0px 20px;
	}
	.bcrm .main .right p{
		margin-left:20px;
		font-size: 12px;
		color: #868686;
	}
	.bcrm .main .right p span{
		color:#ff7c2d;
	}
	/*机器学习工程师和前端开发工程师,
	 第七段和第八段（基本一样，图片换一下位置即可）*/
	.jqxx{
		height:340px;
	}
	.jqxx .top{
		height:60px;
		line-height:60px;
	}
	.jqxx .top h3{
		float: left;
		color:#bfbfbf;
	}
	.jqxx .top .center{
		float: left;
		margin-left:320px;
	}
	.jqxx .top .center ul li{
		float: left;
		color: #868686;
		margin: 0px 20px;
		list-style: none;
	}
	.jqxx .top .center ul li:hover{
		color:#00a4ff;
	}	
	.jqxx .top p{
		float: right;
		font-size: 12px;
		color:#868686;
		margin:0px 30px 0px 0px;
	}
	.jqxx .main{
		width: 1210px;
		height:270px;
	}
	.jqxx .main>img{
		margin:0px 0px 20px 15px;
	}
	.jqxx .main div{
		float: left;
		width: 227px;
		height:270px;
		background-color: #fff;
		margin-right:15px;
	}
	.jqxx .main h5{
		height: 50px;
		margin:15px 0px 0px 20px;
	}
	.jqxx .main p{
		margin-left:20px;
		font-size: 12px;
		color: #868686;
	}
	.jqxx .main p span{
		color:#ff7c2d;
	}
	/*最后一段,底部*/
	.buttom{
		height: 357px;
	}
	.buttom .left{
		float: left;
	}
	 .buttom .left img{
 		margin:30px 0px 25px;
 	}
	.buttom .left p{
		font-size: 12px;
		color:#666666;
	}
	.buttom .left h4{
		width: 120px;
		height: 40px;
		text-align: center;
		margin-top: 15px;
		font-weight: 400;
		line-height: 40px;
		color: #00a4ff;
		border: 2px solid #00a4ff;
	}
	.buttom .right{
		float: right;
	}
	.buttom .right ul,ol{
		list-style-type: none ;
	}
	.buttom .right ul>li{
		float: left;
		color: #7d7d7d;
		margin: 30px 30px 0px 100px;
	}
	.buttom .right ul li ol>li{
		font-size: 12px;
		color: black;
		margin: 5px 0px;
	}
